<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <script src="constom/js/jquery-1.11.1.min.js"></script>
    <link rel="stylesheet" type="text/less" href="./constom/css/css.less"/>
    <script src="./constom/js/less.1.7.4.js" type="text/javascript"></script>
    <script src="constom/js/hammer.v2.0.8.js"></script>
    <link rel="stylesheet" href="constom/css/animate.css"/>
    <link rel="stylesheet" href="constom/css/delay.css"/>

</head>

<body>
<div class="box" style="overflow: hidden">

     <p class="ts" style="color: #fff;position: absolute;top: 40%;left: 30%;font-weight: bolder;font-size: 35px;opacity: 0;transition: 1s all">perfect！</p>
    <div class="buu" style="border-top: 5px solid #000;background: #000">

        <button class="bu2 animated jello delay1" >红色</button>
        <button class="bu3 animated jello delay1">蓝色</button>
        <button class="bu4 animated jello delay1">黑色</button>
        <button class="bu5 animated jello delay1">绿色</button>
        <div id="aa" class="df animated lightSpeedIn" style="font-weight: bolder;color: red;line-height: 40px;text-align: center">
                            <span>得分：</span> <span id="df1"></span>
        </div>
    </div>

    <canvas class="ll" width="1018" height="900" style="background: #313131;">


    </canvas>

</div>

<script>

var _ch=document.getElementsByClassName("ll")[0].getContext("2d"),
        x,
        d,
        fs=0,
        op=0,
        a=0;

var XHh=setInterval(function(){
        $("#aa").animate({fontSize:"18px"},100);
    $("#aa").css({color:"red"})
},500);
    var  xh=setInterval(function(){
        if(op>=2){
            clearInterval(xh);
            $(".ts").remove();
        }
        x=Math.floor(Math.random()*300);
        _ys=Math.floor(Math.random()*4);
        ys=["red","blue","#000","green"];

        if(a>=420){
            d=x;
            c=_ys;
            a=0;
            _ch.fillStyle=ys[c];
            $("#aa").animate({fontSize:"38px"},100);
            $("#aa").css({color:"yellow"});
            $(".ts").css({opacity:"0"});
                op++;
            $("#df1").html(fs);

        }
        else{
            a+=30;
            _ch.clearRect(0,0,800,900);
            _ch.beginPath();
            _ch.rect(d,a,100,100);
            _ch.fill();

        }

    },100);

//    游戏判断 CH

$(".bu2").on("click",function(){

    if(c==0){


        op=0;
        fs+=1;
        $(".ts").css({opacity:"1"});
    }
    else{
        clearInterval(xh);
    }

});
$(".bu3").on("click",function(){

    if(c==1){
        fs+=1;
        op=0;
        $(".ts").css({opacity:"1"});
    }
    else{
        clearInterval(xh);
    }

});
$(".bu4").on("click",function(){

    if(c==2){
        fs+=1;
        op=0;
        $(".ts").css({opacity:"1"});
    }
    else{
        clearInterval(xh);
    }

});
$(".bu5").on("click",function(){

    if(c==3){
        fs+=1;
        op=0;
        $(".ts").css({opacity:"1"});
    }
    else{
        clearInterval(xh);
    }

});



</script>
</body>
</html>